<template>
  <div>
    <h1>user{{id}}</h1>
    <p/>
    <div>
      <a-button type="primary">新增</a-button>&nbsp;
      <a-button type="primary">更新</a-button>&nbsp;
      <a-button type="danger">删除</a-button>
    </div>
    <h1></h1>
    <a-table :dataSource="data" :columns="columns" :scroll="{ x:true }" :rowSelection="rowSelection" >
      <span slot="vehicle" slot-scope="text,record,index">
        {{text.paramValue}}
      </span>
      <span slot="action" slot-scope="text,record,index">
        <a-button type="primary" @click="updateItem(record.key)">编辑</a-button>&nbsp;
        <a-button type="danger" @click="deleteItem(record.key)">删除</a-button>
      </span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {'title':'主字段','dataIndex':'parentCondition','width':'100px','fixed':'left'},
  {'title':'字段','dataIndex':'condition','width':'100px','fixed':'left'},
]
const data = []
let vehicleTitle = '车型'
let vehicleIndex = 'vehicle'
let vehicleCount = 10

for(let i = 0;i<vehicleCount;i++){
  let titleValue = vehicleTitle + i
  let dataIndexValue = vehicleIndex + i
  columns.push({
    'title':titleValue,
    'dataIndex':dataIndexValue,
    'scopedSlots': { customRender: 'vehicle' },
    'width':'300px',
  })
}

columns.push({
  'title': '操作',
  'dataIndex': 'action',
  'width':'200px',
  'fixed': 'right',
  'scopedSlots': { customRender: 'action' }
})
for(let i = 0;i<50;i++){
  var json = {
    key: i,
    parentCondition: `主字段${i}`,
    condition: `字段${i}`
  }

  for(let j = 0;j<vehicleCount;j++){
    let jsonKey = vehicleIndex + j
    let paramValue = `${jsonKey}+主字段${i}+测试参数值${j}`
    json[jsonKey]={'vehicleId':i,'paramValue':paramValue};
  }
  data.push(json)
}

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

export default {
  name: "Test",
  created() {
    const id = this.$route.params.id
    console.log(`id:${id}`)
    console.log(`columns:${columns}`);
    console.log(`data:${data}`);
  },
  data() {
    return {
      id: this.$route.params.id,
      count: 0,
      data,
      columns,
      rowSelection
    };
  },
  props: {},
  methods: {
    
  },
  computed: {

  }
};
</script>

<style lang="scss" scoped></style>
